<template>
	<view class="answer">
		<u-navbar
			class="navbar_top"
			:title-size="28"
			:border-bottom="false"
			:back-icon-size="48"
			back-icon-color="#000000"
			:back-text-style="{ color: '#000000', fontSize: '26rpx' }"
		>
			<view class="navbar-right u-m-r-24" slot="right" @click="goquestions"><text class="questions">提问</text></view>
		</u-navbar>
		<view class="problem">
			<view class="problemli">
				<view class="title">{{ problem.q }}</view>
				<view class="bot">
					<view class="bot-left" @click="goresponse">
						<u-icon name="edit-pen-fill" color="#FFDB28" size="28"></u-icon>
						<text class="u-p-l-12" style="color: #FFDB28;">我来答</text>
					</view>
					<view class="bot_right">{{ problem.q_time }}</view>
				</view>
			</view>
		</view>
		<view v-if="answerList.length">
			<view class="answer_ul">
				<block v-for="(v, k) in answerList" :key="k">
					<view class="answer_li">
						<view class="name">{{ v.a_user }}</view>
						<view class="answer_main "><u-parse :html="v.a_data"></u-parse></view>
						<view class="answer_bot">
							发表于
							<text class="u-p-l-10">{{ v.a_time }}</text>
						</view>
					</view>
				</block>
			</view>
			<u-divider bg-color="$lt-bg" :margin-top="100" :fontSize="28" color="#DFDFDF">暂无更多</u-divider>
		</view>
		<view v-else class="u-font-18 u-flex u-row-center" style="margin-top: 130rpx; color: #DFDFDF;">该问题暂无答案，正在等待你的回答~</view>
	</view>
</template>

<script>
export default {
	name: 'answer',
	data() {
		return {
			problem: {},
			answerList: [
				// 	{
				// a_data: "测试12"
				// a_id: 592
				// a_time: "2020-09-21 10:35:01"
				// a_user: "付全恩1"
				// status: 2
				// 	}
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		if (option) {
			this.problem = JSON.parse(decodeURIComponent(option.problem));
			console.log(this.problem);
			this.getanswerList(this.problem.id);
		}
	},
	//挂载开始之前被调用
	beforeMount() {},
	// onPullDownRefresh() {
	// 	//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	// 	console.log('refresh');
	// 	setTimeout(function() {
	// 		uni.stopPullDownRefresh(); //停止下拉刷新动画
	// 	}, 1000);
	// },
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		getanswerList(id) {
			this.$u.api
				.getanswerList({
					problem_id: id
				})
				.then(res => {
					// console.log(res);
					this.answerList = res.data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		goquestions() {
			uni.navigateTo({
				url: '/pages/knowledge/questions'
			});
		},
		goresponse() {
			uni.navigateTo({
				url: '/pages/knowledge/response?problem=' + encodeURIComponent(JSON.stringify(this.problem))
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.answer {
	min-height: 100vh;
	background-color: $lt-bg;
	.questions {
		font-size: 28rpx;
		font-weight: 600;
		color: #101010;
	}
	.problem {
		background-color: #ffffff;
		padding-bottom: 16rpx;
		.problemli {
			width: 700rpx;
			margin: 0 auto;
			.title {
				font-size: 32rpx;
				color: #000000;
				font-weight: 600;
			}
			.bot {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 28rpx auto 0 28rpx;
				color: #787882;
			}
		}
	}
	.answer_ul {
		.answer_li {
			width: 100%;
			// height: 230rpx;
			background-color: #ffffff;
			padding: 18rpx 28rpx;
			margin-top: 20rpx;
			.name {
				font-size: 26rpx;
				font-weight: 600;
				padding-bottom: 12rpx;
			}
			.answer_main {
				font-size: 28rpx;
				// min-height: 112rpx;
			}
			.answer_bot {
				color: #787882;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
}
</style>
